<template>
  <div class="article-list">
    <!-- 下拉刷新组件 -->
    <van-pull-refresh
      success-text="刷新成功"
      success-duration="1000"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <!-- 没有更多，和加载中不显示，是应为父组件下面的底部框
      和上面的导航栏给遮盖到了，为了解决我们给父组件上下的内边距 -->
      <!-- load事件，当页面第一次打开和下拉触底是会别触发 -->
      <!--error-text请求发生错误的时候进行提示  -->
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="listArticle"
      >
        <!-- 挂载新闻频道的渲染模板 -->
        <ArticlesList
          v-for="(article,i)  in list"
          :key="i"
          :article="article"
        ></ArticlesList>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticlesList from '@/components/article-list'
import { getArticles } from '@/api/article'
export default {
  // 组件名称
  name: 'articleList',
  // 局部注册的组件
  components: {
    ArticlesList
  },
  // 组件参数 接收来自父组件的数据
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  // 组件状态值
  data () {
    return {
      list: [], // 存放数据的数组
      timestamp: null, // 获取第一页数据的时间戳
      loading: false, // 控制加载中loading状态
      finished: false, // 控制数据加载结束的状态
      refreshing: false, // 控制下拉刷新的状态
      error: false// 控制加载失败的提示状态
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成,属性已绑定,但DOM还未生成,el属性还不存在
  */
  created () {
    this.listArticle()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    async listArticle () {
      try {
        // 下滑刷新进入
        if (this.refreshing) {
          // 清空数组
          this.list = []
          // 清楚储存的事件
          this.timestamp = null
          this.refreshing = false
        }
        const id = this.channel.id
        // 判断是否为第一次调用，如果是第一次调用，就给他一个全新的时间戳
        const timestamp = this.timestamp || Date.now()
        const { data } = await getArticles({
          channel_id: id, // 频道id
          // 事件戳，和请求页码有异曲同工之处，如果想获取新的，
          // 就给他提供一个新的时间戳，如果想获取第二页我们就给他提供指定的时间戳
          timestamp,
          with_top: 1// 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        })
        // 把获取到的数据增加到数组里
        const { results } = data.data
        this.list.push(...results)
        // 加载状态结束
        this.loading = false
        // 判断数据全部加载完成
        if (results.length) {
          this.timestamp = data.data.pre_timestamp
        } else {
          // 没有数据了，设置加载状态结束，不再触发上拉加载更多了
          this.finished = true
        }
      } catch (err) {
        // this.$toast('请求数据失败')
        this.loading = false // 关闭 loading 效果
        this.error = true // 开启错误提示
      }
    },
    // 当下拉刷新时触发调用这个函数
    onRefresh () {
      try {
        // 清空列表数据
        this.finished = false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true
        // 再次调用请求
        this.listArticle()
      } catch {
        this.$toast('刷新失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.article-list {
  height: 79vh;
  overflow-y: auto;
}
</style>
